<template>
  <!--折扣-->
  <div>
    <section class="discount-content">
      <div class="top-info">
        <span class="cancle">取消</span>
        <span class="bianji">编辑</span>
      </div>
      <div class="dis-content-in">
        <ul class="list-ul">
          <li class="list-li">
            <i class="choose-icons"></i>
            <div class="img-box">
              <img src="../../../assets/business/images/img1.png" alt="">
            </div>
            <div class="right-con">
              <h3 class="title">[视频教程]C4D 教程白色渲染美工建模设计素材</h3>
              <p class="price">原价 ￥40 </p>
              <p class="price1"><span>券后</span>￥20</p>
              <div class="card-icon">20元券 </div>
            </div>
          </li>
          <li class="list-li">
            <i class="choose-icons"></i>
            <div class="img-box">
              <img src="../../../assets/business/images/img1.png" alt="">
            </div>
            <div class="right-con">
              <h3 class="title">[视频教程]C4D 教程白色渲染美工建模设计素材</h3>
              <p class="price">原价 ￥40 </p>
              <p class="price1"><span>券后</span>￥20</p>
              <div class="card-icon">20元券 </div>
            </div>
          </li>
        </ul>
      </div>
    </section>

    <business_footer></business_footer>
  </div>

</template>
<style scoped>
  @import '@/../../../../assets/business/css/discount.css';
</style>

<script>
  import business_footer from "@/components/business_footer"
  export default {
    components: {
      business_footer
    },
    mounted() {
      $(function () {
        $(".discount-content .top-info .bianji").click(function () {
          if ($(this).html("编辑")) {
            $(this).html("完成");
            $(".choose-content").fadeIn();
            $(".choose-icons").show();
          }
        });
        $(".choose-icons").click(function () {
          $(this).toggleClass("active");
        })
        $(".discount-content .top-info .cancle").click(function () {
          $(".choose-content").fadeOut();
        });
        $(".choose-content .bottom-choose .left-c .icon").click(function () {
          $(this).toggleClass("active");
          if ($(this).hasClass("active")) {
            $(".choose-icons").addClass("active");
          } else {
            $(".choose-icons").removeClass("active");
          }
        });

        $(".choose-content .bottom-choose .right-del").click(function () {
          $(".dis-content-in .list-ul").remove();
          $(".choose-content").fadeOut();
        })
      })
    }
  }
</script>

